import React from "react";
import {CloseOutlined,MinusOutlined,BorderOutlined} from '@ant-design/icons';
import "./index.css";
import {useDispatch,useSelector} from 'react-redux';
import {State} from '../../store/type'
import { ACTION } from '../../store/actions'
import { IUserLoginResponse } from "../../services/user/type";
function Header(){

  const user=useSelector((state:State)=>{return state.user;})
  const dispatch = useDispatch();
  const handleminmize = ()=>{
        window.electronAPI.setminimize();
  }
  const handlemaxmize =()=>{
      window.electronAPI.setmaximize();
  }
  const handleCloseApp = ()=>{
    window.electronAPI.closeApp();
  }
  const handleLogin = ()=>{
      console.log("login")
      dispatch({
      type: ACTION.user.login,
      payload: { username: "chen1122", password: "123456" },
      callback: (data: IUserLoginResponse) => {
          console.log(data);
        }
    })
  }
    return(
        <div className='Header'>

        <ul className='Menu'>
          <li className='Menu-item item-left Name-logo'>Blockly-Electron</li>
          <li className='Menu-item item-left'></li>
          <li className='Menu-item item-left'>案例</li>
          <li className='Menu-item item-left'>运行库</li>
          <li className='Menu-item item-left'>上传云端</li>
          <li className='Menu-item item-left'>下载本地</li>
          <li className='Menu-item item-right Close-Icon' onClick={handleCloseApp}><CloseOutlined /></li>
          <li className='Menu-item item-right Max-Icon'onClick={handlemaxmize}><BorderOutlined /></li>
          <li className='Menu-item item-right Min-Icon' onClick={handleminmize}><MinusOutlined /></li>
          <li className='Menu-item item-right' onClick={handleLogin}>登录</li>
          <li className='Menu-item item-right'>官网</li>
          <li className='Menu-item item-right'>帮助</li>
          <li className='Menu-item item-right'>个人</li>
        </ul>
      </div>
    );
}
export default Header;